<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>${name_china}管理列表</title>
<%@include file="/common/head.jsp" %>

<!-- 时间日期插件 -->
<link href="<%=request.getContextPath()%>/static/plugin/My97DatePicker/skin/default/datepicker.css" rel="stylesheet" >
<script src="<%=request.getContextPath()%>/static/plugin/My97DatePicker/WdatePicker.js"></script>
<style>
.ordercount{
	width:100%;
    display: inline-flex;
}
.samestatic{
	width:309px;
	height:150px;
	margin-top:10px;
	margin-left:77px;
}
.samestatic:nth-child(1){
	margin-left:0px;
}
.ordersty{
	background:#1f95ef;
}
.balance{
	background:#45b854;
}
.customer{
	background:#f86b67;
}
.sametitle{
	color: #fff;
    font-size: 16px;
    margin-left: 20px;
    margin-top: 10px;
}
.sameorderinfo{
	color: #fff;
    margin-left: 35px;
    line-height:20px;
}
.summer-datagrid-cell{
	text-align:center;
}
/*******批量备注*******/
.remarkcon{
    height: 77px;
    background: #fff;
    border: solid 1px #e1e6eb;
    border-bottom: 0;
}
.remarkbut{
	width:114px;
	height:34px;
	border:solid 1px #f86b67;
	line-height:34px;
	text-align:center;
	color:#f86b67;
	margin:20px;
	cursor:pointer;
}
.smallremark{
	color: #1f95ef;
    font-size: 10px;
    margin-left: 7px;
}
.copybut{
	color:#0474c8;
	margin-left: 5px;
	cursor:pointer;
    margin-right: 8px;
}
/***按钮选中态****/
.pitchbut{
	background:#f86b67;
	color:#fff;
}
/*******表格样式*********/
.proleft{
  float:left;
  margin-top: 2px;
  width: 33%;
}
.proleft>img{
  width:84px;
  height:84px;
}
.proright{
  float:left;
  margin-left:2px;
  margin-top: 2px;
  text-align: left;
      width: 66%;
  
}
.sametr{
	height: 110px;
    border-bottom: solid 1px #999;
}
.summer-top{
	padding:0px !important;
}
</style>
</head>
<body class="iframe-page">
<div class="page-title-wrapper">
    <div class="page-title">
        <div class="page-title-text">
            <span>${name_china}管理</span>
        </div>
        <div id="toolbar" style="float: right"></div>
    </div>
    <div class="page-title-border"></div>
</div>
<!-- -订单详细信息- -->
<div class="ordercount">
	<div class="samestatic ordersty">
		<h1 class="sametitle">订单</h1>
		<p class="sameorderinfo">商品总数：${totalSpu}</p>
	    <p class="sameorderinfo">上架商品：${totalUpSpu}</p>
		<p class="sameorderinfo">下架商品：${totalDownSpu}</p>
		<p class="sameorderinfo">预警商品：${totalThredSpu}</p>
	</div>
</div>
<div class="search-field">
	<span class="field-cont">
        <span class="field-cont-title">商品名称</span>
        <input type="text" class="summer-input" id="goodsName"/>
    </span>

     <span class="field-cont">
        <span class="field-cont-title">下单时间</span>
	    <input type="text" id="createTime" name="createTime" class="summer-input summer-validatebox"  onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" data-validatebox="validType:['maxLength[50]']"/> 
    </span>
    
     <span class="field-cont">
        <span class="field-cont-title">完成时间</span>
	    <input type="text" id="finishTime" name="finishTime" class="summer-input summer-validatebox"  onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" data-validatebox="validType:['maxLength[50]']"/> 
        <input type="hidden" class="summer-input" id="state" value="8"/>
    </span>
   
     <span class="field-cont">
        <span class="field-cont-title">　　电话</span>
        <input type="text" class="summer-input" id="userPhone"/>
    </span>
     <span class="field-cont">
        <span class="field-cont-title">配送方式</span>
        <input type="text" class="summer-input" id="sendType"/>
    </span>
    <br/>
    <span class="field-btn-wrapper">
        <a id="search" class="btn btn-primary btn-icon wave distance-right"><i class="icon icon-search"></i></a>
        <a id="reset" class="btn btn-icon wave wave-dark"><i class="icon icon-refresh"></i></a>
    </span>
</div>
<div id="t-wrap">
	<table class="summer-datagrid" >
		<colgroup>
			<col width="10%">
		    <col width="10%">
		    <col width="10%">
		    <col width="10%">
		    <col width="10%">
		    <col width="10%">
		    <col width="10%"> 
		    <col width="10%">
		    <col width="10%">
		    <col width="10%">
	    </colgroup>
	    <thead class="orderhead">
	    	<tr>
	    		<th><div class="summer-datagrid-cell"><a id="main" href="javascript:;">全部订单</a></div></th>
	    		<th><div class="summer-datagrid-cell"><a id="receiving" href="javascript:;">待收货</a></div></th>
	    		<th><div class="summer-datagrid-cell"><a id="received" href="javascript:;">已收货</a></div></th>
	    		<th><div class="summer-datagrid-cell pitchbut"><a id="judged" href="javascript:;">已评价</a></div></th>
	    		</tr>
	    </thead>
		
	</table>
	
	<div id="t-wrap">
    <table class="summer-datagrid" id="dataList">
	    <col width="20%">
	    <col width="20%">
	    <col width="20%">
	    <col width="20%">
	    <col width="20%">
	    <col width="20%">
	    <col width="10%">
	    <col width="10%">	    
	    <col width="10%">
	    <thead>
		     <tr>
		    <th><div class="summer-datagrid-cell">订单号</div></th>
		    <th><div class="summer-datagrid-cell">商品名</div></th>
		    <th><div class="summer-datagrid-cell">单价/数量</div></th>
		    <th><div class="summer-datagrid-cell">买家</div></th>
		    <th><div class="summer-datagrid-cell">下单时间</div></th>
		    <th><div class="summer-datagrid-cell">完成时间</div></th>
		    <th><div class="summer-datagrid-cell">配送方式</div></th>
		    <th><div class="summer-datagrid-cell">订单状态</div></th>
		    <th><div class="summer-datagrid-cell">实付金额</div></th>
			 </tr>
	    </thead>
    </table>
</div>
</div>

<script>
	//请求url
	var CONST_URL = {
		LIST: basePath + '${common_url}list',
		INIT_TORECEVING: basePath + '${common_url}initToReceiving',
		INIT_TORECEIVED: basePath + '${common_url}initToReceived',
		INIT_TOJUDGED: basePath + '${common_url}initToJudged',
		INIT_MAIN: basePath + '${common_url}init'
	};
	
    var  totalSpu,
    	 totalUpSpu,
    	 totalDownSpu,
    	 totalThredSpu,
    	 permission = CommonUtil.getPermission('${name_english}');
    
    $(function () {
    	
    	/******头部点击事件*******/
    	/*
    	$(".orderhead .summer-datagrid-cell").on('click',function(){
    		$(".orderhead .summer-datagrid-cell").removeClass('pitchbut');
    		$(this).addClass('pitchbut');
    		
    	});
    	*/ 
    	$('#sendType').combobox({
            valueField : 'code',
            textField : 'name',
            url : COMMON_URL.getCode + '?type=T_DM_T_XCX_ORDER_DETAIL_SENDTYPE'
        });
    	 $('#state').combobox({
    		 valueField : 'code',
             textField : 'name',
             url : COMMON_URL.getCode + '?type=T_DM_T_XCX_ORDER_DETAIL_STATE'
    	 });
    	/************/
        // 查询按钮
        $('#search').on('click', reloadTable);
    	$("#receiving").on('click',toreceiving);
    	$("#received").on('click',toreceived);
    	$("#judged").on('click',tojudged);
    	$("#main").on('click',toMain);
      //重置按钮
        
	$('#reset').on('click', function() {
			//重置文本框的值
			$('#goodsName').val('');
			$('#createTime').val('');
			$('#finishTime').val('');
			$('#userPhone').val('');//
			$('#sendType').combobox('clear');
			reloadTable();
		});
		createTable();

	});
    function toreceiving(){
    	window.location.href = CONST_URL.INIT_TORECEVING;
    }
    function toreceived(){
    	window.location.href = CONST_URL.INIT_TORECEIVED;
    }
    function tojudged(){
    	window.location.href = CONST_URL.INIT_TOJUDGED;
    }
    function toMain(){
    	window.location.href = CONST_URL.INIT_MAIN;
    }
	// 重新加载表格
	function reloadTable() {
		$('#dataList').datagrid('reload', {
			ajax : {
				param : {
					"goodsName" : trimSpace($('#goodsName').val()),
					"createTime" : trimSpace($('#createTime').val()),
					"finishTime" : trimSpace($('#finishTime').val()),
					"state": trimSpace($('#state').val()),
					"userPhone" : trimSpace($('#userPhone').val()),
					"sendType": $('#sendType').combobox('getValue')
				}
			}
		});
	}
	
	//创建表格
	function createTable() {
		$('#dataList')
				.datagrid(
						{
							ajax : {
								url : CONST_URL.LIST,
								param : {
									"goodsName" : trimSpace($('#goodsName').val()),
									"createTime" : trimSpace($('#createTime').val()),
									"finishTime" : trimSpace($('#finishTime').val()),
									"state": trimSpace($('#state').val()),
									"userPhone" : trimSpace($('#userPhone').val()),
									"sendType": $('#sendType').combobox('getValue')
								},
								success : function(data) { //成功 
									alert("Data Saved: " + msg);
								}
							},
							columns : [
								{
									field : 'orderNo'
								},
								{
									field:'goodsName'
								},
								{
									render:function(rowData){
										var html = rowData.price+"/"+rowData.count
											totalSpu = rowData.totalSpu;
											totalUpSpu = rowData.totalUpSpu;
											totalDownSpu = rowData.totalDownSpu;
											totalThredSpu = rowData.totalThredSpu;
											return html;
									}
								},
								{
										field : 'userNickName'
									},
									{
										field:'createTime'
									},
									{
										field:'endTime'
									},
									{
										field : 'sendType'
									},
									{
										field : 'state',
									},
									{
										field : 'actualPay'
									}
							]
						});
	}
	//跳转代发货页面
	function toMain() {
		window.location.href = CONST_URL.INIT_MAIN;
	}
	function toSending() {
		window.location.href = CONST_URL.INIT_SEND;
	}
	
	function toPaying() {
		window.location.href = CONST_URL.INIT_PAY;
	}
</script>
</body>
</html>